<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="flv.min.js" type="text/javascript"></script>
    <title>手脑</title>

    <script type="text/javascript">
			$(function() {
		             	document.getElementById("loading").style.visibility="visible";
						var now = new Date();
						var $video = $("#videoplayer");
						var url = 'files' + '?' + now.getTime();
						$.getJSON(url, function(data) {
								for(var i = 0; i < data.length; i++) {
									var $li = $('<li>' + data[i].name + '</li>');
									$li.attr("path", data[i].path);
									$("#filelist").append($li);
									$li.click(function() {
											var p = "/files/" + $(this).attr("path");
											if(p.endsWith('flv')) {
													if(flvjs.isSupported()) {
														var videoplayer = document.getElementById('videoplayer');
														var flvPlayer = flvjs.createPlayer({
															type: 'flv',
															url: p
														});
														flvPlayer.attachMediaElement(videoplayer);
														flvPlayer.load();
														flvPlayer.play();
													}
												} else {
													$video.attr("src", p);
													$video[0].play();
												}
											});
									}
									document.getElementById("loading").style.visibility="hidden";
								});
						});



    </script>

    <style>
			.first {
				width: 500px;
				float: left;
				height: 1000px;
				border: 1px solid #3B6273;
				overflow-y: auto;
			}

			.second {
				overflow-y: auto;
				marginLeft: 100px width: 650px;
				float: center;
				height: 1000px;
				<!--border: 1px solid #3B6273;
				-->
			}



    </style>
</head>

<body>

<br/>

<div class="first">
    <ul id="filelist" style="float:left;"></ul>
</div>

<div class="second">
    <video id="videoplayer" style="width:600px;" controls="controls">
    </video>
    <div id="loading">Loading。。。</div>
</div>

</body>

</html>